import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    Pressable,
} from "react-native";
import PagerView from 'react-native-pager-view';

import * as FORM from "./Form"
import Constant from "../constant/Constant";
import util from "../common/utils/util";
import { CFlex, CColor, CStyle } from "../constant/css";
import { useSetState, useCurrent } from "../common/hooks";

/**
 * * 图片轮播 预览
 * @param {object} props 参数项
 * @param {number} props.height 高度
 * @param {number} props.index 默认展示
 * @param {<T extends {url:string}>[]} props.urls 数据
 * @param {'cover' | 'contain' | 'fill' | 'none' | 'scale-down'} props.contentFit 数据
 * @param {Function} props.onClick 事件
 * @returns {React.ReactElement}
 */
const ImageView = (props) => {
    const {
        height = 320, index = 0,
        urls = [], contentFit = 'cover',
        onClick = null
    } = props

    const [state, setState] = useSetState({
        currentIndex: 0,
        showModal: false,
    })

    const clickImage = () => {
        const { showModal } = state
        setState({
            showModal: !showModal
        })
    }

    return (
        <View>
            <View>
                <PagerView style={{ height: state.showModal ? util.getScreen.height : height, backgroundColor: CColor.Black }} initialPage={index} onPageSelected={(i) => setState({ currentIndex: i.nativeEvent.position })}>
                    {urls.map((item, index) =>
                        <Pressable key={index} onPress={clickImage}>
                            <FORM.ExpoImage contentFit={state.showModal ? 'contain' : contentFit} style={styles.image} source={{ uri: item.url }} />
                        </Pressable>
                    )}
                </PagerView>
                <View style={styles.point}>
                    {urls.map((item, index) =>
                        <View key={index} style={state.currentIndex === index ? styles.blueTag : styles.grayTag} />
                    )}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    image: {
        width: '100%',
        height: '100%',
    },
    point: {
        position: 'absolute',
        bottom: 10,
        zIndex: 99,
        width: '100%',
        ...CFlex.row,
        ...CFlex.cc,
    },
    blueTag: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        width: 12,
        height: 5,
        borderRadius: 5,
        margin: 3,
    },
    grayTag: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        width: 5,
        height: 5,
        borderRadius: 5,
        margin: 3,
    },
})

export default ImageView